import styles from './index.less';
import { Button,Modal } from 'antd';
import Sql from '@/components/boncGpt/RobotRes/Sql';
// import { format } from 'sql-formatter';
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';
import 'prismjs/components/prism-sql';
import { useEffect } from 'react';

export const Dialog=(props)=>{
    useEffect(()=>{
        Prism.highlightAll();
        })
    return(
        <Modal width={600} open={props.vis} onOk={props.onOk} onCancel={props.onCancel} okText="是" cancelText="否" title="指标预查询">
            <div className={styles.dialogBody}>
                <div className={styles.content}>
                    {/* {props.content} */}
                    <div>指标名称：{props.content?.kpi_name}</div>
                    {props.content?.kpi_sql&&
                    <div>指标SQL：
                        <Sql sql={props.content?.kpi_sql} />
                    </div>}
                    {props.content?.final_kpi_sql&&
                    <div>指标完整加工SQL：
                        <Sql sql={props.content?.final_kpi_sql} />
                    </div>}
                    {props.content?.vtable_sql&&
                    <div>虚拟宽表SQL：
                        <Sql sql={props.content?.vtable_sql} />
                    </div>}
                    <div style={{float:'right'}}>是否进行数据生成</div>
                </div>
                {/* <div className={styles.btnBox}>
                    <span style={{marginRight:'10px'}}>是否进行数据生成</span>
                    <Button type='primary' style={{marginRight:'10px'}}>是</Button>
                    <Button type='primary'>否</Button>
                </div> */}
            </div>
        </Modal>
    )
}
